// components/progressbar/progressbar.js
let movableAreaWidth = 0
let movableViewWidth = 0
// 当前秒
let currentSec = -1
// 总时长 秒为单位
let duration = 0
// 当前进度条是否在拖拽 解决进度条拖动时与onTimeUpdate中设置值发生冲突
let isMoving = false
const BackgroundAudioManager = wx.getBackgroundAudioManager()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00'
    },
    // 移动的距离
    movableDis: 0,
     // 进度条的宽度
    progress: 0
  },

  lifetimes: {
    // 生命周期函数 DOM渲染完成后执行
    ready() {
      if (this.properties.isSame && this.data.showTime.totalTime == '00:00') {
        this._setTime()
      }
      this._getMovableDis()
      this._bindBGMEvent()
      
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 进度条进度变化时触发 e.detail.source表示移动的原因(5种) touch 
    onChange(e) {
      // console.log(e)
      // 用户拖动进度时
      if (e.detail.source =='touch') {
        this.data.progress = e.detail.x / (movableAreaWidth - movableViewWidth) * 100
        this.data.movableDis = e.detail.x
        isMoving = true
      }
    },
    // 用户停止拖动
    onTouchEnd() {
      const currentTimeFmt = this._dateFormat(Math.floor(BackgroundAudioManager.currentTime))
      this.setData({
        progress: this.data.progress,
        movableDis: this.data.movableDis,
        ['showTime.currentTime']: `${currentTimeFmt.min}:${currentTimeFmt.sec}`
      })
      // 设置拖动进度条设置歌曲播放进度
      BackgroundAudioManager.seek(duration * this.data.progress / 100)
      // onTouchEnd事件触发完成后会概率的触发一次onChange方法
      isMoving = false
    },
    // 获取距离
    _getMovableDis() {
      // 获取宽度 在组件中用this 在pages中用wx.createSelectorQuery
      // 在不同手机上宽度不相同 比例来求
      const query = this.createSelectorQuery()
      // 指定查询节点
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((rect) => {
        // console.log(rect)
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
      })
    },
    _bindBGMEvent() {
      BackgroundAudioManager.onPlay(() => {
        // 播放时没有移动 解决onTouchEnd事件触发完成后会概率的触发一次onChange方法
        isMoving = false
        this.triggerEvent('musicPlay')
      })
      BackgroundAudioManager.onStop(() => {

      })
      BackgroundAudioManager.onPause(() => {
        this.triggerEvent('musicPause')
      })
      BackgroundAudioManager.onWaiting(() => {

      })
      BackgroundAudioManager.onCanplay(() => {
        // 背景音乐总时长 有时会出现未定义 setTimeout解决
        // console.log(BackgroundAudioManager.duration)
        if (typeof BackgroundAudioManager.duration != 'undefined') {
          this._setTime()
        } else {
          setTimeout(() => {
            this._setTime()
          },1000)
        }
      })
      // onTouchEnd与onTimeUpdate中设置值发生冲突
      BackgroundAudioManager.onTimeUpdate(() => {
        // 时间一秒只设置一次
        if (!isMoving) {
          // 当前播放时长 currentTime是以毫秒为单位的时间
          const currentTime = BackgroundAudioManager.currentTime
          // 歌曲总时长
          const duration = BackgroundAudioManager.duration
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            const currentFmt = this._dateFormat(currentTime)
            this.setData({
              // 播放进度
              movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
              // 百分比
              progress: currentTime / duration * 100,
              ['showTime.currentTime']: `${currentFmt.min}:${currentFmt.sec}`
            })
            currentSec = sec
            // 歌词与时间联动 组件与组件间传值currentTime
            this.triggerEvent('timeUpdate',{
              currentTime
            })
          }
        }        
      })
      BackgroundAudioManager.onEnded(() => {
        // 激活事件
        this.triggerEvent('musicEnd')
      })
      BackgroundAudioManager.onError(() => {
        wx.showToast({
          title: '错误' + res.errCode,
        })
      })
    },
    _setTime() {
      // 以毫秒为单位的时间
      duration = BackgroundAudioManager.duration
      console.log(duration)
      // 格式化时间
      const durationFmt = this._dateFormat(duration)
      console.log(durationFmt)
      this.setData({
        ['showTime.totalTime']: `${durationFmt.min}:${durationFmt.sec}`
      })
    },
    // 格式化时间
    _dateFormat(sec) {
      // 分钟
      const min = Math.floor(sec / 60)
      // 秒
      sec = Math.floor(sec % 60)
      return {
        'min': this._parse0(min),
        'sec': this._parse0(sec)
      }
    },
    // 时间补0
    _parse0(sec) {
      return sec < 10 ? '0' + sec : sec

    }
  }
})
